<template>
	<view>
		<cu-custom bgColor="bg-orange" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">操作清单</block>
		</cu-custom>
		<view class="bigbox">
			<view class="top">
				<view class="box">
					人生已完成列表

				</view>
			</view>
			<view class="content">
				<view class="sbox" v-for="item,index in lifething" :key="index" @click="operator(index)">
					{{item.content}}
				</view>
				<view class="sbox special" @click="add">+自定义</view>
			</view>
			<van-popup :show="showadd" position="bottom" :round="true" custom-style='height:400rpx;' @close="Closeadd">
				<view class="picker">
					<view class="name" style="margin-top: 45rpx;">
						<van-cell-group>
							<van-field :value="title" size='large' placeholder="取个名字吧..." @change="Changetitle" autosize  custom-style='border: 1rpx solid #eee;border-radius: 50rpx;background-color: #fff1b9;width:90%;margin-left: 45rpx;'/>
							<!-- <van-field :value="value" placeholder="说点什么吧..." autosize class="input"
								custom-style='border: 1rpx solid #eee;border-radius: 50rpx;background-color: #fff1b9;width:100%;'
								@change='change' /> -->
						</van-cell-group>
					</view>
					<view class="btn">
						<view class="commit" @click="commitadd" v-if="!flag">
							<van-icon name="success" size='50rpx' />
						</view>
						<view class="commit" @click="commitupdate" v-else>
							<van-icon name="success" size='50rpx' />
						</view>
					</view>
				</view>
			</van-popup>
			<van-action-sheet :show="show" :actions="actions" @close="onClose" @select="onSelect" @cancel='onClose'
				cancel-text="取消" />
		</view>

	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState('m_life', ['lifething']),

		},
		data() {
			return {
				show: false,
				second: 2,
				index: 0,
				showadd: false,
				title: '',
				flag: 0,
				actions: [{
						name: '编辑',
					},
					{
						name: '删除',
					},

				],
			};
		},
		methods: {
			...mapMutations('m_life', ['updatelifething']),
			Changetitle(e) {
				this.title = e.detail
			},
			add() {
				this.flag=0
				this.showadd = true
			},
			operator(index) {
				this.show = true
				this.index = index
			},
			Closeadd() {
				this.showadd = false
				this.title = ''
			},
			onClose() {
				this.show = false
			},
			onSelect(e) {
				this.show = false
				if (e.detail.name === '删除') {

					uni.showModal({
						title: '提示',
						content: '是否确认删除该事项',
						success: (res) => {
							if (res.confirm) {
								let array = [...this.lifething]
								array.splice(this.index, 1)
								this.update(array)
							} else if (res.cancel) {
								return
							}
						}
					});
				} else if (e.detail.name === '编辑') {
					this.title = this.lifething[this.index].content
					this.showadd = true
					this.flag=1

				} else {
					return
				}
			},
			async update(array) {
				const result = await uni.$http.post('/update/updatelifething', {
					lifething: array
				})
				if (result.data.status === 0) {
					this.updatelifething(array)
					const timer = setInterval(() => {
						this.second--;
						uni.showToast({
							title: '操作成功',
							icon: 'success',
							duration: 2000
						});
						if (this.second <= 0) {
							clearInterval(timer)
							return
						}
						uni.showToast({
							title: '操作成功',
							icon: 'success',
							duration: 2000
						});
					}, 1000)
				} else {
					uni.showToast({
						title: '操作失败',
						icon: 'error',
						duration: 2000
					});

				}
			},
			async commitadd() {
				if (!this.title) {
					uni.showToast({
						title: '标题不能为空',
						icon: 'none'
					})
					return
				}
				this.showadd = false
				let array = [...this.lifething]
				array.push({
					completed: false, // 默认所有项目都未完成  
					content: this.title,
					detail: ''
				})
				const result = await uni.$http.post('/update/updatelifething', {
					lifething: array
				})
				if (result.data.status === 0) {
					this.updatelifething(array)
					const timer = setInterval(() => {
						this.second--;
						uni.showToast({
							title: '添加成功',
							icon: 'success',
							duration: 2000
						});
						if (this.second <= 0) {
							clearInterval(timer)

							this.title = ''
							return
						}
						uni.showToast({
							title: '添加成功',
							icon: 'success',
							duration: 2000
						});
					}, 1000)
				} else {
					uni.showToast({
						title: '添加失败',
						icon: 'error',
						duration: 2000
					});
					this.title = ''
				}
			},

			async commitupdate() {
				if (!this.title) {
					uni.showToast({
						title: '标题不能为空',
						icon: 'none'
					})
					return
				}
				this.showadd = false
				let array = [...this.lifething]
				array[this.index].content = this.title
				const result = await uni.$http.post('/update/updatelifething', {
					lifething: array
				})
				if (result.data.status === 0) {
					this.updatelifething(array)
					const timer = setInterval(() => {
						this.second--;
						uni.showToast({
							title: '更新成功',
							icon: 'success',
							duration: 2000
						});
						if (this.second <= 0) {
							clearInterval(timer)

							this.title = ''
							return
						}
						uni.showToast({
							title: '更新成功',
							icon: 'success',
							duration: 2000
						});
					}, 1000)
				} else {
					uni.showToast({
						title: '更新失败',
						icon: 'error',
						duration: 2000
					});
					this.title = ''
				}
			},

		}
	}
</script>

<style lang="less">
	.bigbox {
		width: 95%;
		height: 70%;
		margin: 10rpx 20rpx;
		background-color: #FFFFFF;
		padding-bottom: 50rpx;
		.top {
			height: 130rpx;
			width: 100%;
			background-color: #F0E5DE;
			border-top-right-radius: 30rpx;
			border-top-left-radius: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 50rpx;
		}

		.content {
			height: 90%;
			display: flex;
			flex-wrap: wrap;
			overflow: auto;
			border: 1rpx solid #F0E5DE;
			padding-left: 10rpx;
			padding-bottom: 20rpx;
			border-bottom-right-radius: 30rpx;
			border-bottom-left-radius: 30rpx;
			.sbox {
				position: relative;
				background-color: #d9e1e8;
				margin: 10rpx;
				padding: 10rpx;
				border-radius: 2rpx;
			}

			.special {
				background-color: #ABD0CE;
			}

		}

	}

	.btn {
		display: flex;
		justify-content: center;
		margin-top: 50rpx;

		.commit {
			background-color: #f9cdad;
			height: 100rpx;
			width: 100rpx;
			border-radius: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
		}
	}
</style>